<template>
  <el-container>
    <el-header>
      <el-page-header @back="goBack" content="章节详情"> </el-page-header>
    </el-header>
    <el-main>
      <collapse-aside>
        <chapter></chapter>
      </collapse-aside>
      <!-- <router-view></router-view> -->
      <div class="study-content">
        <my-video v-if="value == 'video'"></my-video>
        <common-exhibition v-else-if="value == 'material'"></common-exhibition>
        <exercise v-else-if="value == 'exercise'"></exercise>
      </div>
      <!-- 选择查看内容的框 -->
      <div class="select-study-content">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </el-main>
  </el-container>
</template>

<script>
// TODO:视频，资料，习题做到全解析和错误处理
import CommonForm from "@/components/CommonForm.vue";
import CommonExercise from "@/components/CommonExercise.vue";
import CollapseAside from "@/components/CollapseAside.vue";
import { uploadStudyResult } from "@/services/student";
import Chapter from "./Chapter.vue";
import MyVideo from "./Video.vue";
import CommonExhibition from "./CommonExhibition.vue";
import Exercise from "./Exercise.vue";
import { mapState } from "vuex";
// import { Loading } from 'element-ui';
export default {
  name: "Study",
  components: {
    CommonForm,
    CommonExercise,
    CollapseAside,
    Chapter,
    MyVideo,
    CommonExhibition,
    Exercise,
  },
  data() {
    return {
      done: false,
      selectedItem: "视频",
      options: [
        {
          value: "video",
          label: "学习",
        },
        {
          value: "exercise",
          label: "测验",
        },
      ],
      value: "video",
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
  },
  computed: {
    ...mapState("studyAbout", {
      course_id: (state) => state.course.course_id,
      section_id: (state) => state.currentSection.id,
      currentTime: (state) => state.video.currentTime,
      watched: (state) => state.video.watched,
    }),
  },
  beforeDestroy() {
    const { student_id } = JSON.parse(localStorage.getItem("userInfo"));
    const { course_id } = this;
    const { section_id } = this;
    const resourceWatched = [true, true];
    uploadStudyResult(
      course_id,
      section_id,
      student_id,
      this.watched,
      this.currentTime,
      resourceWatched
    );
  },
};
</script>

<style lang='less' scoped>
.el-container {
  width: 100%;
  height: 100%;
  .el-header {
    height: 70px;
    background-color: #b3c0d1;
  }
  .el-main {
    height: calc(100% - 70px);
    background-color: #e9eef3;
    position: relative;
    scroll-behavior: smooth;
  }
}
.select-study-content {
  position: fixed;
  right: 20px;
  top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.study-content {
  width: 85%;
  min-height: calc(100% - 40px);
  // background-color: #ccc;
  margin: 0 auto;
}
</style>